<HTML>
 <HEAD>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/static/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.ztree.core-3.5.js"></script>
    <link rel="stylesheet" href="/static/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="/static/css/zTreeStyle/demo.css" type="text/css">
 </HEAD>
<style>
table{
    table-layout: fixed;
    width:600px;
    border-collapse: collapse;
    border-spacing: 0px;
    background-color: transparent;
    
    }
body {
    line-height: 20px;
    font-size: 12px;
}
.ss{
word-break: break-all;
word-wrap:break-word;
font-size:14px;
border-collapse:collapse;
border-spacing:0px;
border-top:1px solid #DDD;
padding: 8px;
  width:400px;
 overflow:auto;}

.dd{
word-break: break-all;
 word-wrap:break-word;
font-size:17px;
  width:100px;
 overflow:auto;
font-weight:bold;
text-align: center;
}
</style>
<script>
    var zNodes;
    var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback:{
                onClick:zTreeOnClick
            }
        };
    function zTreeOnClick(event,treeId,treeNode){
        $.ajax({
            type:"POST",
            url:'/page/personnel/sysconfiginfo/attsite_tree_data',
            dataType:"json",
            data:"nodeid="+treeNode.id,
            success:function(data){
            $("#tab").empty();
            for(var i=0;i<data.length;i++){
                var $tr=$("<tr></tr>");
                var $td=$("<td class='ss'></td>");
                $td.append(data[i]['name']);
                $td.appendTo($tr);
                var $td=$("<td class='ss'></td>");
                $td.append(data[i]['value']);
                $td.appendTo($tr);
                $tr.appendTo("#tab");
                }
            }
        });
    };
        
   $(document).ready(function (){
    $.ajax({
        type:"POST",
        url:'/page/personnel/sysconfiginfo/attsite_tree',
        dataType:"json",
        success:function(nodes){
            zNodes=nodes;
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        }
    });
    $.ajax({
        type:"POST",
        url:'/page/personnel/sysconfiginfo/attsite_tree_data',
        dataType:"json",
        data:"nodeid=2",
        success:function(data){
                $("#tab").empty();
                for(var i=0;i<data.length;i++){
                    var $tr=$("<tr></tr>");
                    var $td=$("<td class='ss'></td>");
                    $td.append(data[i]['name']);
                    $td.appendTo($tr);
                    var $td=$("<td class='ss'></td>");
                    $td.append(data[i]['value']);
                    $td.appendTo($tr);
                    $tr.appendTo("#tab");
                    }
                }
    });
     });
    
</script>


<BODY>
<div>


<table>
<tr>
<td valign=top width="300px" style="BORDER-RIGHT: #999999 1px dashed">
		<ul id="treeDemo" class="ztree" style="width:225px; overflow:hidden;"></ul>
</td>
<td valign=top>
<table id="tab" align="center" valign="top"></table> 
</td>
</tr>
</table>


</div>

</BODY>
</HTML>
